<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素的内容</title>
</head>
<style type="text/css">
</style>
<body>
    <h3><span>html()和text()方法设置元素内容</span></h3>
    <div id="html"></div>
    <div id="html2"></div>
    <div id="text"></div>
    <div id="text2"></div>
    <input id="op" type="text" name="uname" value="oop">
</body>
<!-- 
    操作元素的内容
        html()          获取元素的内容，包含html标签（非表单元素）
        html("内容")    设置元素的内容，包含html标签（非表单元素）
        text()          获取元素的纯文本内容，不识别html标签（非表单元素）
        text("内容")    设置元素的纯文本内容，不识别HTML标签（非表单元素）
        val()           获取元素的值（表单元素）
        val("值")       设置元素的值（表单元素）

    表单元素
        文本框text、密码框password、单选框radio、复选框checked、隐藏域hidden、文本域textarea、下拉框select
    非表单元素
        div、span、h1~h6、table、tr、td、li、p等
-->
<script src="js/jquery-3.7.1.js"></script>
<script type="text/javascript">
    // 设置元素的内容
    $("#html").html("<h2>上海</h2>");
    $("#html2").html("上海");
    // 获取元素的内容
    var html = $("#html").html();
    var html2 = $("#html2").html();
    console.log(html);
    console.log(html2);
    // 设置元素的纯文本内容
    $("#text").text("北京");
    $("#text2").text("<h2>好</h2>")
    // 获取元素的值
    var text = $("#text").text();
    var text2 = $("#text2").text();
    console.log(text,text2); 
    // 获取表单元素的值
    // 取
    var val = $("#op").val();
    console.log(val)
    // 赋
    $("#op").val("今天天气不错");
</script>

</html>